<template>
    <div class="chose">
        <div class="table" v-if="active==1">
            <el-table :border="true" :data="pageResult.records">
                <el-table-column prop="id" v-if="false"></el-table-column>
                <el-table-column label="案号" prop="caseNo"></el-table-column>
                <el-table-column label="委托人" prop="caseWtr"></el-table-column>
                <el-table-column label="对方当事人" prop="caseOppositeParties"></el-table-column>
                <el-table-column label="代理费" prop="caseAgencyfee"></el-table-column>
                <el-table-column label="已付款" prop="casePaidsal"></el-table-column>
                <el-table-column label="已开票" prop="caseInvoiced"></el-table-column>
                <el-table-column label="收案日期" prop="collectionTime"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleAutoCreate(scope.row)">申请文书</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-footer class="case-list-footer">
                <el-pagination
                        style="margin: 10px auto"
                        background
                        layout="prev, pager, next"
                        :total="pageResult.total"
                        :page-size="pageResult.size"
                        class="pagination"
                        @current-change="handleIndexChange"
                >
                </el-pagination>
            </el-footer>
        </div>

        <div class="auto-box" v-if="active==2">
            <auto :law="law" @back="back" @completed="back"></auto>
        </div>
    </div>
</template>

<script>
    //引入组件
    const Auto = () => import('./Auto.vue')
    //引入服务类
    import CaseLawService from '../../../model/gs/CaseLawService.js'
    const caseLawService = CaseLawService.getInstance()

    export default {
        data() {
            return {
                active:1,
                law:{},
                pageResult:[],
                params:{
                    isOwn:'1',
                    tab:'total',
                    recycle:'N'
                }
            }
        },
        methods:{
            //获取所有案件
            getCaseLaws(){
                caseLawService.getByPage(this.params).then(response => {
                    if(response.data.code === 0){
                        this.pageResult = response.data.data
                    }
                })
            },
            handleAutoCreate(law){
                this.law = law
                this.active=2
            },
            //当前页放生变化的事件
            handleIndexChange(index){
                this.params.page = index
                this.getCaseLaws()
            },
            back(){
                this.active = 1
            }
        },
        created(){
            this.getCaseLaws()
        },
        components:{
            Auto
        }
    }
</script>

<style scoped>
    .chose{
        width: 100%;
    }
    .case-list-footer{
        width: 100%;
        height: 10%;
        position: relative;
    }
    .case-list-footer .pagination{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }
</style>
